* { margin: 0; box-sizing: border-box; } #app { height: 100vh; overflow: hidden;
display: flex; flex-direction: column; } .channel-nav { height: 44px;
overflow-x: auto; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); }
.channel-nav::-webkit-scrollbar { display: none; } .channel-nav .list { display:
flex; } .channel-nav .item { padding: 0 15px; height: 44px; text-align: center;
line-height: 44px; text-decoration: none; font-size: 14px; color: #999;
white-space: nowrap; -webkit-tap-highlight-color: transparent; position:
relative; transition: all 0.3s; } .channel-nav .item::after { content: '';
position: absolute; left: 50%; bottom: 0; width: 0px; height: 2px;
border-radius: 1px; background-color: coral; transform: translateX(-50%);
transition: all 0.3s; } .channel-nav .item.active::after { width: 24px; }
.channel-nav .item.active { color: #333; font-size: 18px; } .article-list {
flex: 1; overflow-y: auto; padding: 0 15px; } .article-item { padding: 15px 0;
border-bottom: 0.5px solid rgba(0, 0, 0, .07); } .article-item .title { width:
100%; margin: 0; line-height: 22px; font-size: 16px; color: #333; margin-bottom:
8px; max-height: 44px; display: -webkit-box; overflow: hidden; text-overflow:
ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .article-item
.img { width: 30%; height: 74px; border-radius: 4px; margin-bottom: 8px;
margin-right: 3%; } .article-item .info { width: 100%; color: #a5a6ab;
font-size: 12px; position: relative; } .article-item .info span { margin-right:
12px; }
